<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

    <script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js" type="text/javascript"></script>
    <!-- 引入vue -->

</head>
<body>
<div id="app">

    <router-link to="/home">主页</router-link>
    <router-link to="/login">登录</router-link>
    <!-- 路由视图 -->
    <router-view></router-view>
</div>

<script type="text/javascript">
    /*
    第一步：定义展示页面内容的组件
    第二步：定义路由规则
    第三步：初始化路由对象
    第四步：将路由对象绑定到vue实例中去
    第五步：在根组件中定义路由视图的展示位置

    注意点：如果在html页面中使用vuerouter  在使用script引入的时候 一定要放在vue下面

    路由配置：
        path：指定路由路径
        name:给路由命名
        redirect:指定路由重定向的路径
        component：指定该路由渲染的组件


    */

    // 首页
    const home = {
        template: `<h1>这个是项目首页</h1>
				`
    }
    // 登录页面
    const login = {
        template: `
				<h1>这个是项目登录页面</h1>
				`
    }
    // 创建一个路由对象
    const router = new VueRouter({
        //通过路由routes指定路由规则
        routes: [{
            path: '/',
            // 设置路由重定向
            redirect: '/login'
        },
            {
                path: '/login',
                component: login,
                // 给路由设置名字
                name: 'login'
            },
            {
                path: '/home',
                component: home
            }

        ]
    })


    var vm = new Vue({
        el: '#app',
        // 将路由对象绑定到vue实例中
        router

    });
</script>


</body>
</html>
